<template>
  <div class="date-time">
    <div class="time">{{ currentTime }}</div>
    <div class="weekDate">
      <div class="week">{{ currentWeek }}</div>
      <div class="date">{{ currentDate }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DateTime",
  data() {
    return {
      currentTime: "",
      currentDate: "",
      currentWeek: "",
      timer: null,
    };
  },

  beforeDestroy() {
    this.timer && clearInterval(this.timer);
  },

  mounted() {
    let _this = this;
    this.timer = setInterval(() => {
      _this.getCurrentDateTime();
    }, 1000);
  },
  methods: {
    _formatWeek(day) {
      const dayWeekMap = {
        1: "星期一",
        2: "星期二",
        3: "星期三",
        4: "星期四",
        5: "星期五",
        6: "星期六",
        0: "星期日",
      };

      return dayWeekMap[day];
    },

    getCurrentDateTime() {
      const _this = this;
      //时间数字小于10，则在之前加个“0”补位。
      function check(i) {
        var num;
        i < 10 ? (num = "0" + i) : (num = i);
        // i < 10 ? num =  i : num = i;
        return num;
      }

      let time = new Date();
      let year = time.getFullYear();
      let month = time.getMonth() + 1; //getMonth()获取的是0-11月份，要+1
      let day = time.getDate();
      let nowDayOfWeek = time.getDay(); //今天本周的第几天

      //获取时分秒
      let h = time.getHours();
      let m = time.getMinutes();
      let s = time.getSeconds();

      //检查是否小于10
      h = check(h);
      m = check(m);
      s = check(s);
      // 带年份
      // this.currentDate = `${year}-${month}-${check(day)}`
      this.currentDate = `${check(month)}/${check(day)}`;
      this.currentTime = `${h} : ${m} : ${s}`;
      this.currentWeek = _this._formatWeek(nowDayOfWeek);
    },
  },
};
</script>

<style scoped lang="scss">
.date-time {
	margin-top: 1px;

  width: 120px;
  height: 50px;
  //   font-family: SimSun;
  //   font-size: 40px;
  //   letter-spacing: 0px;
  //   align-items: center;
  color: #fff;
  background-color: rgba(112, 242, 23, 0);
}

.time {
  // text-align: center;
  // font-family: SimSun;
  // font-size: 18px;
  // font-weight: normal;
  // font-stretch: normal;
  // letter-spacing: 2px;
  // color: #ffffff;
//   width: 120px;
//   height: 50px;
//   position: absolute;
//   top: 6px;
//   left: 10px;
  color: #fff;
  text-align: center;
  letter-spacing: 1px;
  font-size: 14px;
  height: 21px;
  line-height: 21px;
  font-size: 16px;
  letter-spacing: 1px;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.weekDate {
	margin-top: 2px;
  height: 21px;
  display: flex;
//   justify-content: space-around;
justify-content: center;
}
.weekDate .week {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 1px;
  color: #ffffff;
  height: 21px;
  line-height: 21px;
}

.weekDate .date {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing:1px;
  color: #ffffff;
  height: 21px;
  line-height: 21px;
}
</style>
